<template>
	<div class="movie-show-view" @click="goMovieDetails(movieData._id)">
		<a-layout style="height: 300px">
			<a-layout-sider>
				<a-image
					height="300"
					width="200"
					show-loader
					:src="movieData.movieImg"
				/>
			</a-layout-sider>
			<a-layout-content>
				<div class="movie_details">
					<h1>{{ movieData.movieName }}</h1>
					<a-space>
						<a-tag v-for="x in movieData.movieCategory" :key="x">{{
							x
						}}</a-tag>
					</a-space>
					<p>上映地区:{{ movieData.movieArea }}</p>
					<p class="text_hidden">
						{{ movieData.movieContext }}
					</p>
					<div class="movie_details_bottom">
						<div>
							<icon-dashboard />上映时间:{{ movieData.movieTime }}
						</div>
						<div>
							<icon-video-camera />观看次数:{{
								movieData.movieNumDownload
							}}
						</div>
						<div>
							<icon-thumb-up />点赞次数:{{
								movieData.movieNumSuppose
							}}
						</div>
					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script setup>
// eslint-disable-next-line vue/prefer-import-from-vue
import { isFunction } from '@vue/shared'
import { useRouter } from 'vue-router'
const router = useRouter()
// 接收电影数据
const props = defineProps({
	movieData: Promise
})
let movieData = ref([])
// 将数据过滤和计算
if (isFunction(props.movieData.then) && isFunction(props.movieData.catch)) {
	props.movieData.then(res => {
		movieData.value = res
	})
} else {
	// eslint-disable-next-line vue/no-setup-props-destructure
	movieData.value = props.movieData
}
// 前往对应的电影详情页
function goMovieDetails(movie_id) {
	router.push(`/movieDetails/${movie_id}`)
}
</script>

<style lang="scss" scoped>
.movie-show-view {
	background-color: var(--main-2-bg);
	padding: var(--normal-distance);
	border-radius: 10px;
	cursor: pointer;
}
.movie-show-view:hover {
	box-shadow: 0 0 6px var(--sd-bg);
}
.movie_details {
	position: relative;
	height: 100%;
	margin-left: 2rem;
	overflow: hidden;
	color: var(--fc-bg);
	.movie_details_bottom {
		position: absolute;
		display: flex;
		bottom: var(--normal-distance);
		right: 0;
		color: var(--fc-bg);
		& > * + * {
			margin-left: var(--normal-distance);
		}
	}
}
:deep(.arco-tag.arco-tag-size-medium.arco-tag-checked) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
</style>
